<template>
  <div class="main-box">
    <div>
      <div class="img-box">
        <img :src="dataComfirm.path">
      </div>
      <div class="car-info">
        <h1>CAR:　　{{ dataComfirm.name }}</h1>
        <h1>PRICE:　　{{ dataComfirm.price }}</h1>
        <h2>ADDRES:　　{{ dataComfirm.addres }}</h2>
        <div>
          <button @click="pay">立即付款</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import EventBus from '../until/EventBus'
import { useStore } from 'vuex'
export default {
  name: '',
  setup() {
    const store = useStore()

    //从vuex中获取数据
    const dataComfirm = ref({})
    dataComfirm.value = store.state.buyInfo

    //付款
    const pay = ()=>{
      axios.post('http://localhost:3000/order',dataComfirm.value).then(res=>{
        ElMessage({
          showClose: true,
          message: '交易成功',
          center: true,
        })
      })
      //付款后关闭确认信息框
      EventBus.emit('visible3',false)
    }

    return {
      dataComfirm,pay
    }
  },
}

</script>
<style scoped lang='scss'>
    .main-box{
      width: 100%;
      margin:1px auto;
      &>div{
        padding: 5px;
        border: 1px #303133 solid;
        .img-box{
          width: 100%;
          img{
            width: 100%;
            border: none;
          }
        }
      }
      .car-info{
        *{margin: 0;padding: 0;}
        button{
          width: 15%;
          padding: 10px;
          font-size: 1.2em;
          background-color: #303133;
          color: white;
          letter-spacing: 0.1em;
          margin-left: 85%;
          cursor: pointer;
          &:hover{
            opacity: 0.9;
          }
        }
      }
    }
</style>